<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 15:47:18
 * @LastEditTime: 2022-08-09 16:21:44
-->
<template>
  <div class="contract-msg">
    <p class="title">签约信息</p>
    <ul class="flex flex-wrap">
      <li class="flex" v-for="(item, index) in msgList" :key="index">
        <p class="text-right name">{{ item.name }}：</p>
        <p v-if="item.key == 'isAssociates'">
          {{ msgCon[item.key] && msgCon[item.key] != '-' ? '是' : '否' }}
        </p>
        <p v-else-if="item.key == 'isInsteadOfWorkers'">
          {{ msgCon[item.key] && msgCon[item.key] != '-' ? '是' : '否' }}
          <span v-if="msgCon[item.key] && msgCon[item.key] != '-'">
            ({{ msgCon['workersRatio'] }}%)
          </span>
        </p>
        <p v-else-if="item.key == 'auditName'">
          {{ msgCon[item.key] }}({{ msgCon['auditWorkNo'] }})
        </p>
        <p v-else-if="item.unit == ''">{{ msgCon[item.key] }}{{ item.unit }}</p>
        <p v-else>
          <span v-if="item.key == 'totalPrice'">
            {{ $tool.formatterMoney(msgCon[item.key]) }}
            <span v-if="msgCon[item.key] != '-'">{{ item.unit }}</span>
            <span v-if="adjustNum">
              ({{ adjustNum }}次调整
              <span class="view-log" @click="viewAdjustLog()">调整记录</span>
              ）
            </span>
          </span>
          <span v-else-if="msgCon.cooperationType == 6 && item.key == 'channelCost'">
            {{ msgCon.cooperationTypeName }}
          </span>
          <span v-else>
            {{ $tool.formatterMoney(msgCon[item.key]) }}
            <span v-if="msgCon[item.key] != '-'">{{ item.unit }}</span>
          </span>
        </p>
        <p
          v-if="unlocking(item.code) && item.editFlag"
          class="edit hand"
          @click="editFun(item.key)">
          修改
        </p>
      </li>
    </ul>
    <Modal v-model="contractFlag" :title="title" footer-hide :width="800" :closable="false">
      <div>
        <Form
          ref="contractForm"
          :model="contractForm"
          :label-width="170"
          :rules="contractValidate"
          label-position="right">
          <!--修改客户名称-->
          <FormItem label="原客户姓名：" prop="customerName" v-if="showKey == 'customerName'">
            <p>{{ contractForm.customerName }}</p>
          </FormItem>
          <FormItem
            label="修改后客户姓名："
            prop="newCustomerName"
            v-if="showKey == 'customerName'">
            <Input
              v-model="contractForm.newCustomerName"
              placeholder="请输入客户姓名"
              clearable></Input>
          </FormItem>
          <!--修改渠道费用-->
          <FormItem label="当前渠道费用：" prop="channelCost" v-if="showKey == 'channelCost'">
            <p>{{ contractForm.channelCost }}</p>
          </FormItem>
          <FormItem label="修改后渠道费用：" prop="newChannelCost" v-if="showKey == 'channelCost'">
            <Input v-model="contractForm.newChannelCost" placeholder="请输入渠道费用"></Input>
          </FormItem>
          <!--合同编号-->
          <FormItem label="合同编号：" prop="bargainCode" v-if="showKey == 'bargainCode'">
            <Input
              v-model="contractForm.bargainCode"
              placeholder="请输入合同编号"
              clearable></Input>
          </FormItem>
          <!--预告登记日期-->
          <FormItem
            label="预告登记日期："
            prop="advanceRegisterDate"
            v-if="showKey == 'advanceRegisterDate'">
            <DatePicker
              type="date"
              format="yyyy-MM-dd"
              @on-change="resolveDate()"
              v-model="contractForm.advanceRegisterDate"
              placeholder="请选择预告登记日期"
              style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem
            label="抵押收件日期："
            prop="pledgeConsigneeDate"
            v-if="showKey == 'pledgeConsigneeDate'">
            <DatePicker
              type="date"
              format="yyyy-MM-dd"
              @on-change="resolveDate()"
              v-model="contractForm.pledgeConsigneeDate"
              placeholder="请选择抵押收件日期"
              style="width: 200px"></DatePicker>
          </FormItem>
          <!--修改关系户-->
          <FormItem label="是否关系户：" prop="isAssociates" v-if="showKey == 'isAssociates'">
            <RadioGroup v-model="contractForm.isAssociates">
              <Radio :label="0">否</Radio>
              <Radio :label="1">是</Radio>
            </RadioGroup>
          </FormItem>
          <!--是否联代分佣-->
          <FormItem
            label="是否联代分佣："
            prop="isInsteadOfWorkers"
            v-if="showKey == 'isInsteadOfWorkers'">
            <RadioGroup v-model="contractForm.isInsteadOfWorkers">
              <Radio :label="0">否</Radio>
              <Radio :label="1">是</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem
            label="分佣比例："
            prop="workersRatio"
            v-if="showKey == 'isInsteadOfWorkers' && contractForm.isInsteadOfWorkers == 1">
            <Input
              v-model="contractForm.workersRatio"
              type="number"
              placeholder="请输入分佣比例"
              clearable>
              <span slot="append">%</span>
            </Input>
          </FormItem>
          <!--是否渠道-->
          <FormItem label="当前客户来源渠道：" prop="channelName" v-if="showKey == 'channelName'">
            <p>{{ contractForm.channelName }}</p>
          </FormItem>
          <FormItem
            label="当前渠道合作类型："
            prop="cooperationTypeName"
            v-if="showKey == 'channelName'">
            <p>{{ contractForm.cooperationTypeName }}</p>
          </FormItem>
          <FormItem label="当前渠道费用：" prop="channelCost" v-if="showKey == 'channelName'">
            <p>
              {{ contractForm.channelCost }}
              <span v-if="contractForm.channelCost != '无'">{{ contractForm.channelUnit }}</span>
            </p>
          </FormItem>
          <FormItem
            label="修改后客户来源渠道："
            prop="newChannelId"
            v-if="showKey == 'channelName'">
            <!-- <Cascader :data="channelList" :render-format="formatChannel"
              v-model="contractForm.newChannelId" @on-change="changeChannel" placeholder="请选择">
            </Cascader> -->
            <div class="radioNine" v-if="contractFlag">
              <RadioGroup
                :v-model="contractForm.newChannelId"
                @on-change="changeChannel"
                type="button">
                <Radio v-for="item in channelList" :key="item.channelId" :label="item.channelId">
                  <!-- {{ item.channelName }} -->
                  <span
                    :title="item.channelName"
                    style="
                      display: inline-block;
                      width: 100%;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    ">
                    {{ item.channelName }}
                  </span>
                  <span v-if="item.isTakeLook == '1'" class="qu">渠</span>
                  <span v-if="item.isNetAcquire == '1'" class="wang">网</span>
                </Radio>
              </RadioGroup>
            </div>
          </FormItem>

          <FormItem label="修改后渠道合作类型：" prop="newChannelType1" v-if="cooperationFlag">
            <Select
              v-model="contractForm.newChannelType1"
              @on-change="newChannelType1Channel"
              placeholder="请输入合作类型"
              clearable>
              <Option
                v-for="option in cooperationTypeFinal"
                :value="option.key"
                :key="option.key"
                :label="option.value"></Option>
            </Select>
          </FormItem>

          <FormItem
            label="修改后渠道合作类型："
            prop="newChannelType"
            v-if="
              showKey == 'channelName' && contractForm.newChannelType != '' && !cooperationFlag
            ">
            <p>{{ contractForm.newChannelType }}</p>
          </FormItem>

          <!--线下投放，客户运营不展示附件-->
          <FormItem label="渠道附件：" prop="showChannelImg" class="annex-list" v-if="filesFlag">
            <enclosure-img
              :images="contractForm.showChannelImg"
              :alreayDel="true"
              @onHandleRemove="handleRemove"></enclosure-img>
            <upload-enclosure
              @onHandleSuccess="handleSuccess"
              :images="contractForm.showChannelImg"
              :disabledFlag="disabledFlag"
              v-if="contractForm.showChannelImg.length < 30"></upload-enclosure>
          </FormItem>
          <FormItem class="flex flex-horizontal-end">
            <Button @click="cancelcontract" style="margin-right: 20px">取消</Button>
            <Button type="primary" @click="submitContract">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!--签约调整-->
    <con-adjust-detail ref="conAdjustDetail" :detailMsg="detailMsg"></con-adjust-detail>
  </div>
</template>
<script>
  import enclosureImg from '@/components/enclosureImg.vue'
  import uploadEnclosure from './uploadEnclosure.vue'
  import conAdjustDetail from './conAdjustDetail.vue'
  import comMgr from '@/biz/sales/salesCommon'
  import channelMgr from '@/biz/channel/channel.js'
  export default {
    props: ['detailMsg', 'orderId', 'buildingId'],
    data() {
      let numberPass = (rule, value, callback) => {
        let reg = /^([0-9]{1,2}|100)$/
        if (value && !reg.test(value)) {
          callback(new Error('请输入0-100内的数字'))
        } else {
          callback()
        }
      }

      let costPass = (rule, value, callback) => {
        let reg = /^([0-9]+[\d]*(.[0-9]{1,2})?)$/
        if (value && !reg.test(value)) {
          callback(new Error('请输入数字,最多保留两位小数'))
        } else {
          callback()
        }
      }
      return {
        filesFlag: false,
        annexLogList: [], //附件总表
        cooperationTypeFinal: this.$dt.dictInfo().cooperationTypeFinal,
        newChannelType1: '',
        cooperationFlag: false,
        disabledFlag: false,
        // 待审核时可修改签约客户名称  回款中 已全款可修改信息
        contractFlag: false,
        contractForm: {
          customerName: '',
          newCustomerName: '',
          bargainCode: '',
          advanceRegisterDate: '',
          pledgeConsigneeDate: '',
          isAssociates: '',
          isInsteadOfWorkers: '',
          workersRatio: '',
          showChannelImg: [],
          channelName: '',
          cooperationTypeName: '', // 合作类型
          channelCost: '', // 渠道费用
          channelUnit: '', // 渠道费用单位
          newChannelId: null, // 修改后渠道
          newChannelType: '', // 修改后的渠道合作类型
          newChannelCost: '', // 修改后渠道费用
          newChannelType1: ''
        },
        channelList: [], // 渠道列表
        contractValidate: {
          newChannelType1: [
            {
              required: true,
              message: '屋拉的合作渠道不能为空',
              trigger: 'blur'
            }
          ],
          newCustomerName: [
            {
              required: true,
              message: '客户姓名不能为空',
              trigger: 'blur'
            }
          ],
          newChannelCost: [
            {
              required: true,
              message: '渠道费用不能为空',
              trigger: 'blur'
            },
            { validator: costPass, trigger: 'blur', required: false }
          ],
          bargainCode: [
            {
              required: true,
              message: '合同编号不能为空',
              trigger: 'blur'
            }
          ],
          advanceRegisterDate: [
            {
              required: true,
              message: '预告登记日期不能为空',
              trigger: 'blur'
            }
          ],
          pledgeConsigneeDate: [
            {
              required: true,
              message: '抵押收件日期不能为空',
              trigger: 'blur'
            }
          ],
          workersRatio: [
            {
              required: true,
              message: '分佣比例不能为空',
              trigger: 'blur'
            },
            { validator: numberPass, trigger: 'blur', required: false }
          ],

          newChannelId: [
            {
              required: true,
              message: '来源渠道不能为空',
              trigger: 'blur',
              type: 'number'
            }
          ]
        },
        statusName: '',
        titleList: [
          {
            key: 'customerName',
            title: '客户姓名修改',
            value: 'CONTRACT_EDIT_CUSTOMER_NAME'
          },
          {
            key: 'channelCost',
            title: '渠道费用修改',
            value: 'CONTRACT_EDIT_CHANNEL_COST'
          },
          {
            key: 'bargainCode',
            title: '合同编号修改',
            value: 'CONTRACT_EDIT_BARGAIN_CODE'
          },
          {
            key: 'advanceRegisterDate',
            title: '预告登记日期修改',
            value: 'CONTRACT_EDIT_ADVANCE_REGISTER_DATE'
          },
          {
            key: 'pledgeConsigneeDate',
            title: '抵押收件日期修改',
            value: 'CONTRACT_EDIT_PLEDGE_CONSIGNEE_DATE'
          },
          {
            key: 'isAssociates',
            title: '是否关系户修改',
            value: 'CONTRACT_EDIT_IS_ASSOCIATES'
          },
          {
            key: 'isInsteadOfWorkers',
            title: '是否联代分佣修改',
            value: 'CONTRACT_EDIT_IS_INSTEADOF_WORKERS'
          },
          {
            key: 'channelName',
            title: '渠道修改',
            value: 'CONTRACT_EDIT_CHANNEL'
          }
        ],
        title: '',
        msgList: [
          {
            name: '签约姓名',
            key: 'customerName',
            edit: true,
            unit: '',
            code: '0104030302'
          },
          {
            name: '客户手机号',
            key: 'customerPhone',
            edit: false,
            unit: '',
            code: ''
          },
          {
            name: '认购单价',
            key: 'price',
            edit: false,
            unit: '元',
            code: ''
          },
          {
            name: '认购总价',
            key: 'sumPrice',
            edit: false,
            unit: '元',
            code: ''
          },
          {
            name: '定金金额',
            key: 'deposit',
            edit: false,
            unit: '元',
            code: ''
          },
          {
            name: '认购日期',
            key: 'orSubscriptionDate',
            edit: false,
            unit: '',
            code: ''
          },
          {
            name: '签约单价',
            key: 'unitPrice',
            edit: false,
            unit: '元',
            code: ''
          },
          {
            name: '签约总价',
            key: 'totalPrice',
            edit: false,
            unit: '元',
            code: ''
          },
          {
            name: '合同编号',
            key: 'bargainCode',
            edit: true,
            unit: '',
            code: '0104030303'
          },
          {
            name: '预告登记日期',
            key: 'advanceRegisterDate',
            edit: true,
            unit: '',
            code: '0104030304'
          },
          {
            name: '抵押收件日期',
            key: 'pledgeConsigneeDate',
            edit: true,
            unit: '',
            code: '0104030305'
          },
          {
            name: '是否关系户',
            key: 'isAssociates',
            edit: true,
            unit: '',
            code: '0104030306'
          },
          {
            name: '是否联代分佣',
            key: 'isInsteadOfWorkers',
            edit: true,
            unit: '',
            code: '0104030307'
          },
          {
            name: '来源渠道',
            key: 'channelName',
            edit: true,
            unit: '',
            code: '0104030309'
          },
          {
            name: '合作类型',
            key: 'cooperationTypeName',
            edit: false,
            unit: '',
            code: ''
          },
          {
            name: '渠道费用',
            key: 'channelCost',
            edit: true,
            unit: '元',
            code: '0104030316'
          },
          {
            name: '创建时间',
            key: 'createTime',
            edit: false,
            unit: '',
            code: ''
          },
          {
            name: '审核人',
            key: 'auditName',
            edit: false,
            unit: '',
            code: ''
          },
          {
            name: '审核时间',
            key: 'auditDate',
            edit: false,
            unit: '',
            code: ''
          }
        ],
        msgCon: {},
        showKey: '',
        newKey: '', //新值
        isKey: '', // 是否
        cooperationTypeList: [],
        adjustNum: 0
      }
    },
    components: {
      enclosureImg,
      uploadEnclosure,
      conAdjustDetail
    },
    created() {},
    async mounted() {
      await this.getChannelList()
      this.msgCon = { ...this.detailMsg.orContractWebInfoVO }
      this.adjustNum = this.detailMsg.orAdjustmentDetailVOList.length

      let filterVal = this.$dt
        .dictInfo()
        .cooperationTypeFinal.filter((item) => item.dictValue == this.msgCon.cooperationType)

      this.msgCon.cooperationTypeName =
        this.msgCon.cooperationTypeName != '-'
          ? this.msgCon.cooperationTypeName
          : filterVal.length
          ? filterVal[0].dictLabelCn
          : '无'

      this.msgCon.channelUnit = filterVal.length ? filterVal[0].unit : ''

      this.statusName = this.detailMsg.orContractBaseInfoVO.statusName

      // 处理修改按钮逻辑
      this.msgList.forEach((item) => {
        item.editFlag = this.showEditFun(item)
      })
    },
    methods: {
      newChannelType1Channel(val) {
        // console.log(val, 'vvvvvvv');
        // if (val == '7') {
        //   this.filesFlag = false
        // } else {
        //   this.filesFlag = true
        // }
      },
      showChannelImgFun() {
        let flag1 = false
        let changeChannelId = this.contractForm.newChannelId
          ? this.contractForm.newChannelId
          : this.contractForm.channelId
        this.channleAnnexLogList().then((res) => {
          let annexFiles = []
          let currentChannel = this.channelList.find((item) => {
            return item.channelId == changeChannelId
          })
          if (
            currentChannel &&
            (currentChannel.isNetAcquire == '1' || currentChannel.isTakeLook == '1')
          ) {
            if (currentChannel.cooperationType != '7') {
              flag1 = true
              if (res && res.length) {
                let currentAnnex = res.find((annexItem) => {
                  return annexItem.channelId == currentChannel.channelId
                })
                if (currentAnnex && currentAnnex.url) {
                  let annexUrl = JSON.parse(currentAnnex.url)
                  if (annexUrl && annexUrl.length > 0) {
                    annexUrl.forEach((itemUrl) => {
                      if (itemUrl) {
                        annexFiles.push({
                          name: itemUrl.date,
                          url: itemUrl.url
                        })
                      }
                    })
                    this.$set(this.contractForm, 'showChannelImg', annexFiles)
                  }
                } else {
                  this.$set(this.contractForm, 'showChannelImg', [])
                }
              }
            } else {
              flag1 = false
            }
          } else {
            flag1 = false
          }
          if (this.showKey == 'channelName' && flag1) {
            this.filesFlag = true
          } else {
            this.filesFlag = false
          }
        })
      },
      formatChannel(labels, selectedData) {
        if (selectedData.length) {
          const index = labels.length - 1
          return labels[index]
        }
      },
      // 渠道修改  线下投放 客户运营(1,4) 隐藏附件上传   网络媒体2 渠道带看3显示附件上传
      changeChannel(val) {
        this.contractForm.newChannelId = val
        let cooperationTypetype = null
        let cooperationTypeName = null
        let currentChannel = this.channelList.find((item) => {
          return item.channelId == this.contractForm.newChannelId
        })
        if (currentChannel) {
          cooperationTypeName = currentChannel.cooperationTypeName
          cooperationTypetype = currentChannel.cooperationType
        }
        this.contractForm.newChannelType = cooperationTypeName ? cooperationTypeName : '无'
        if (cooperationTypetype == '6') {
          this.cooperationFlag = true
        } else {
          this.cooperationFlag = false
        }
        this.showChannelImgFun()
      },
      //获取渠道附件
      channleAnnexLogList() {
        let params = {
          businessId: this.$route.query.subscriptionId,
          housesId: this.buildingId ? this.buildingId : this.$dt.buildInfo().housesId,
          type: 'subscription'
        }
        return channelMgr.channleAnnexLogList(params).then((res) => {
          this.annexLogList = res
          return res
        })
      },
      // 渠道列表
      getChannelList() {
        let params = {
          validate: 1,
          type: 1,
          buildingId: this.buildingId ? this.buildingId : this.$dt.buildInfo().housesId
        }

        return channelMgr
          .caseChannelListOrder(params)
          .then((res) => {
            this.channelList = res
          })
          .catch((res) => {
            this.channelList = []
          })
      },
      // // 渠道列表
      // getChannelList() {
      //   let params = {
      //     buildingId: this.buildingId ?
      //       this.buildingId : this.$dt.buildInfo().housesId,
      //     type: 1
      //   }
      //   return comMgr
      //     .getChannelList(params)
      //     .then((res) => {
      //       this.channelList = res.channelList
      //     })
      //     .catch((res) => {
      //       this.channelList = []
      //     })
      // },
      // 是否可编辑
      showEditFun(item) {
        let flag = false
        if (this.statusName == '签约待审核' && item.key == 'customerName') {
          flag = true
        }
        if (item.key == 'channelCost') {
          if (
            [
              '签约待审核',
              '签约回款中',
              '签约已全款',
              '签约退签中',
              '签约已退签',
              '签约已交房'
            ].indexOf(this.statusName) > -1 &&
            ['1', '2'].indexOf(this.msgCon.cooperationType) > -1
          ) {
            flag = true
          } else {
            flag = false
          }
        } else if (['签约回款中', '签约已全款'].indexOf(this.statusName) > -1 && item.edit) {
          flag = true
        } else {
          flag = false
        }
        return flag
      },
      editFun(key) {
        this.showKey = key
        this.$nextTick(function () {
          this.title = this.titleList.filter((item) => item.key == key)[0].title
          this.contractForm = this.$tool.deepClone(Object.assign(this.contractForm, this.msgCon))
          this.$tool.transformationNullSet(this.contractForm)
          this.contractForm.isAssociates = this.contractForm.isAssociates ? 1 : 0
          this.contractForm.isInsteadOfWorkers = this.contractForm.isInsteadOfWorkers ? 1 : 0
          // this.contractForm.showChannelImg = this.resolveChannelImg(
          //   this.msgCon.channelType
          // )
          this.contractForm.channelCost = this.contractForm.channelCost
            ? this.contractForm.channelCost
            : '无'
          this.contractFlag = true
          switch (this.showKey) {
            case 'customerName':
              this.newKey = 'newCustomerName'
              this.isKey = ''
              break
            case 'channelCost':
              this.newKey = 'newChannelCost'
              this.isKey = ''
              break
            case 'bargainCode':
              this.newKey = key
              this.isKey = ''
              break
            case 'advanceRegisterDate':
              this.newKey = key
              this.isKey = ''
              break
            case 'pledgeConsigneeDate':
              this.newKey = key
              this.isKey = ''
              break
            case 'isAssociates':
              this.newKey = ''
              this.isKey = key
              break
            case 'isInsteadOfWorkers':
              this.newKey = 'workersRatio'
              this.isKey = key
              break
            case 'channelName':
              this.newKey = 'newChannelId'
              this.isKey = ''
              break
            default:
              break
          }
          this.showChannelImgFun()
        })
      },
      cancelcontract() {
        ;(this.contractForm = {
          customerName: '',
          newCustomerName: '',
          bargainCode: '',
          advanceRegisterDate: '',
          pledgeConsigneeDate: '',
          isAssociates: '',
          isInsteadOfWorkers: '',
          workersRatio: '',
          showChannelImg: [],
          channelName: '',
          cooperationTypeName: '', // 合作类型
          channelCost: '', // 渠道费用
          channelUnit: '', // 渠道费用单位
          newChannelId: null, // 修改后渠道
          newChannelType: '', // 修改后的渠道合作类型
          newChannelCost: '', // 修改后渠道费用
          newChannelType1: ''
        }),
          this.$refs.contractForm.resetFields()
        this.contractFlag = false
      },
      resolveDate() {
        this.contractForm[this.showKey] = this.$tool.formatDate(this.contractForm[this.showKey])
      },
      viewAdjustLog() {
        this.$refs.conAdjustDetail.show()
      },
      submitContract() {
        // if (
        //   (this.contractForm.newChannelId[0] == 2 ||
        //     this.contractForm.newChannelId[0] == 3) &&
        //   !this.contractForm.showChannelImg.length &&
        //   this.showKey == 'channelName'
        // ) {
        //   this.$Message.error('渠道附件不能为空')
        //   return false
        // }
        this.$refs['contractForm'].validate((valid) => {
          if (valid) {
            let params = {
              operateType: this.titleList.filter((item) => item.key == this.showKey)[0].value,
              fileAddress: JSON.stringify(this.contractForm.showChannelImg),
              is: !this.contractForm[this.isKey] ? false : true,
              newValue:
                this.showKey == 'channelName'
                  ? this.contractForm.newChannelId
                  : this.contractForm[this.newKey],
              orderId: this.orderId,
              cooperationType: this.contractForm.newChannelType1
                ? this.contractForm.newChannelType1
                : null
            }

            // 提交签约信息
            comMgr
              .editOrderInfo(params)
              .then((res) => {
                this.contractFlag = false
                this.$Message.success(this.title + '成功！')
                this.$emit('onGetOrderDetail')
              })
              .catch((res) => {
                this.$Message.error(res)
              })
          }
        })
      },
      //移除图片
      handleRemove(index, type) {
        this.contractForm.showChannelImg.splice(index, 1)
      },
      // 上传成功
      handleSuccess(file, type) {
        file.forEach((item) => {
          this.contractForm.showChannelImg.push({
            url: item.url,
            date: this.$tool.formatDate(new Date())
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .contract-msg {
    margin-top: 40px;

    ul {
      li {
        width: 50%;
        line-height: 50px;

        .name {
          width: 150px;
        }

        .edit {
          margin-left: 10px;
          color: #2d8cf0;
          font-size: 14px;
        }

        .view-log {
          margin-left: 5px;
          color: #2d8cf0;
          cursor: pointer;
        }
      }
    }
  }

  ::v-deep .annex-list {
    .ivu-form-item-content {
      display: flex;
      flex-flow: wrap;
    }
  }
</style>
